<template>
  <div class="container">
    <div class="my-bg" @click="showBg = true">
      <img :src="userInfo.userBg" alt="背景图片" class="auto-img">
    </div>
    <div class="transparent">
      <div class="my-user">
        <div class="left">
          <img :src="userInfo.userImg" alt="背景图片" class="auto-img">
        </div>
        <div class="right">
          <div class="nickName">{{ userInfo.nickName }}</div>
          <div class="introduction">{{ userInfo.desc === '' ? '这家伙很懒，什么也没有留下！' : userInfo.desc }}</div>
        </div>
      </div>
      <div class="my-list">
        <div class="list" v-for="(item,index) in myList" :key="index">
          <van-cell :title="item.title" @click="routerChange(item.to)" is-link></van-cell>
        </div>
      </div>
    </div>
    <van-action-sheet
        v-model="showBg"
        cancel-text="取消"
        close-on-click-action>
      <div class="changeBomBg">
        <van-uploader :after-read="onSelectPhone">
          <span>从手机相册选择</span>
        </van-uploader>
        <div class="camera"><span>拍照</span></div>
      </div>
    </van-action-sheet>

  </div>
</template>

<script>

import {postFindMy, updateAvatar, updateUserBg} from "@/api/my";

export default {
  name: "index",
  data() {
    return {
      userInfo: [],
      myList: [
        {title: "个人资料", to: "/personalData"},
        {title: "我的订单", to: "/myOrder"},
        {title: "我的收藏", to: "/myCollection"},
        {title: "地址管理", to: "/addressManagement"},
        {title: "安全中心", to: "/securityCenter"},

      ],
      showBg: false,
      actions: [{name: '从手机相册选择'}, {name: '拍照'}],
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let tokenString = this.$cookies.get("tokenString");
      let self = this;
      if (!tokenString) return this.$router.push({name: 'login'});
      postFindMy({
        appkey: this.appkey,
        tokenString: tokenString
      }).then(res => {
        if (res.data.code === 700) {
          this.$router.push({name: 'login'});
        } else if (res.data.code === "A001") {
          self.userInfo = res.data.result[0]
        }
      })

    },
    // 跳转到相关页面
    routerChange(to) {
      this.$router.push(to)
    },
    // 上传背景图片
    onSelectPhone(file) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showBg = false;
      this.updateUserBg(file)
    },
    //  上传头像接口
    updateAvatar(file) {
      /**
       *  说明：上传图片时，先获取base64码，再将base64码前面的 data:image/jpeg;base64, 去除
       *    剩下的base64码就是后台需要的的内容
       *    去除 data:image/jpeg;base64, 方法
       *    可以使用 replace(/^data:image\/[A-Za-z]+;base64,/, '') 处理
       */
      let self = this;
      let tokenString = this.$cookies.get("tokenString");
      let serverBase64Img = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
      let img = file.file.type;
      let imgType = img.substring(img.indexOf('/') + 1);
      let data = {
        appkey: self.appkey,
        tokenString: tokenString,
        imgType: imgType,
        serverBase64Img: serverBase64Img
      }
      updateAvatar(data).then(res => {
        if (res.data.code === "H002") {
          self.$toast.fail(res.data.msg)
        } else if (res.data.code === 'H001') {
          self.$toast.success(res.data.msg)
          self.init();
        } else if (res.data.code === 700) {
          self.$toast.fail('登录超时，请重新登录！')
          this.$router.push('/login')
        } else {
          self.$toast.fail(res.data.msg)
        }
      })
    },
    //   修改背景图片
    updateUserBg(file) {
      /**
       *  说明：上传图片时，先获取base64码，再将base64码前面的 data:image/jpeg;base64, 去除
       *    剩下的base64码就是后台需要的的内容
       *    去除 data:image/jpeg;base64, 方法
       *    可以使用 replace(/^data:image\/[A-Za-z]+;base64,/, '') 处理
       */
      let self = this;
      let tokenString = this.$cookies.get("tokenString");
      let serverBase64Img = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
      let img = file.file.type;
      let imgType = img.substring(img.indexOf('/') + 1);
      let data = {
        appkey: self.appkey,
        tokenString: tokenString,
        imgType: imgType,
        serverBase64Img: serverBase64Img
      }
      updateUserBg(data).then(res => {
        if (res.data.code === "H002") {
          self.$toast.fail(res.data.msg)
        } else if (res.data.code === "I001") {
          self.$toast.success(res.data.msg)
          self.init();
        } else if (res.data.code === 700) {
          self.$toast.fail('登录超时，请重新登录！')
          this.$router.push('/login')
        } else {
          self.$toast.fail(res.data.msg)
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.container {
  background-color: #f7f7f7;

  .my-bg {
    height: 200px;
  }

  .transparent {
    background: #ffffff;
    opacity: 0.9;
    margin: -40px 10px 0 10px;
    padding: 10px;
    border-radius: 10px;

    .my-user {
      display: flex;

      .left {
        flex: 2;
        border-radius: 50%;

        img {
          border-radius: 50%;
        }
      }

      .right {
        flex: 8;
        margin-left: 20px;

        .nickName {
          color: #0c34ba;
          font-weight: bold;
          font-size: 20px;
        }

        .introduction {
          font-size: 14px;
          margin-top: 10px;
          color: #999999;
        }
      }
    }

    .my-list {
      margin-top: 30px;

      .list {
        padding: 2px;
        border-bottom: 1px solid #e7e7e7;
      }

      .list:last-child {
        padding: 0;
        border: none;
      }
    }
  }
}

.changeBomBg {
  text-align: center;

  div {
    margin: 0 15px;
    padding: 15px 0;
    color: black;
  }

  div:last-child {
    border-top: 1px solid #999999;
  }
}
</style>
